<template>
	<el-header height="52px" class="app-header">
		<div class="app-header-l">
			<div class="app-header-l-logo">
				<img :src="imgLogo" alt="logo" draggable="false" />
				<span>{{ appHeader }}</span>
			</div>
		</div>
		<div class="app-header-r">
			<time>{{ currentTime }}</time>
			<el-dropdown @command="handleCommand">
				<div class="app-header-r-dropdown">
					<div class="app-header-r-avatar">管</div>
					<el-divider direction="vertical"></el-divider>
					<span class="app-header-r-name">{{ user.username }}</span>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item icon="el-icon-user" command="/user">个人中心</el-dropdown-item>
						<el-dropdown-item icon="el-icon-setting" command="/config">系统设置</el-dropdown-item>
						<el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</el-header>
</template>

<script>
import { mapActions, mapState } from "vuex";

import dayjs from "dayjs";
dayjs.locale("zh-cn");

import imgLogo from "@/assets/img/logo.svg";
import { removeToken } from "@/tools/auth";

const appHeader = import.meta.env.APP_HEADER;

export default {
	name: "LayHeader",
	data() {
		return {
			imgLogo,
			appHeader,
			currentTime: "",
			timer: null
		};
	},
	computed: {
		...mapState("user", ["user"])
	},
	beforeMount() {
		this.updateTime(true);
	},
	beforeUnmount() {
		clearInterval(this.timer);
	},
	methods: {
		...mapActions(["resetState"]),
		handleCommand(command) {
			if (command === "logout") {
				this.$confirm("确定退出系统吗？", "退出提示", { confirmButtonText: "退出", type: "warning" })
					.then(async () => {
						await this.resetState();
						removeToken(true);
					})
					.catch(() => {});
			} else if (command !== this.$route.path) {
				this.$router.push(command);
			}
		},
		updateTime(isFirstCall = false) {
			this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
			if (isFirstCall) {
				const now = new Date();
				const delay = 1000 - now.getMilliseconds();
				setTimeout(() => {
					this.updateTime();
					this.timer = setInterval(this.updateTime, 1000);
				}, delay);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: inset 0 -1px 0 var(--color-border);

	&-l {
		display: flex;
		align-items: center;
		font-size: 20px;

		&-logo {
			height: 100%;
			padding-right: 10px;
			display: flex;
			align-items: center;

			img {
				width: 32px;
				height: 32px;
			}

			span {
				padding-left: 10px;
			}
		}
	}

	&-r {
		font-size: 14px;
		time {
			user-select: none;
			margin-right: 10px;
			font-size: 16px;
			text-align: center;
			vertical-align: middle;
		}
		&-avatar {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			line-height: 32px;
			color: #fff;
			text-align: center;
			transition: 0.5s;
			background-size: 200% auto;
			background-image: linear-gradient(to right, var(--color-primary) 0%, #021b79 51%, var(--color-primary) 100%);
			&:hover {
				background-position: right center;
			}
		}
		&-name {
			cursor: pointer;
			&:hover {
				color: var(--color-primary);
			}
		}
		&-dropdown {
			display: flex;
			align-items: center;
		}
	}
}
</style>
